<template>
    <!-- 要展示的内容 -->
    <div class="main">
        <div class ="login">
            <div class="logo">
                <img src="@/assets/logo.png" alt="">
            </div>
            <el-form :model="form" class="login-form" :rules="rules" ref="loginFormRef">
                <el-form-item prop="name">
                    <el-input v-model="form.name" placeholder="用户名":prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model="form.pwd" placeholder="密码":prefix-icon="Lock" show-password></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="submitForm(loginFormRef)">登录</el-button>
                    <el-button type="success" @click="restForm(loginFormRef)">重置表单</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>    
import { reactive , ref} from 'vue' 
import { User, Lock } from '@element-plus/icons-vue'
import api from '@/api/index.js'  // 导入api接口
import { useRouter } from 'vue-router'

// 表单数据
const form = reactive({
    name: '',
    pwd: ''
})

// 表单验证规则
const rules = reactive({
    name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ]
})

// 路由
const router = useRouter()

// 定义表单数据
const loginFormRef = ref(null)

// 重置表单
const restForm = (loginFormRef) => {
    loginFormRef.resetFields()}

// 登录
const submitForm = (loginFormRef) => {
    loginFormRef.validate((valid) => {
        if (valid) {
            console.log('验证通过,正在提交')
            api.login(form).then(res => {
                //根据接口返回结果做相应处理
                if (res.data.status === 200) {
                    // 登录成功提示信息
                    ElMessage({
                        message:res.data.msg,
                        type:'success',
                    })
                    // 记录token
                    sessionStorage.setItem('token', res.data.data.token)
                    //localStorage.setItem('token', res.data.data.token)
                    // 登录成功后跳转到首页
                    router.push('/')
                } else {
                    // 登录失败提示错误信息
                    ElMessage.error(res.data.msg)
                }
            })
        } else {
            console.log('验证失败')
            return false
        }
    })
}

</script>

<style scoped>
    .main {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-attachment: fixed;
        background-color: rgb(186, 182, 182);
    }
    .login {
        width: 450px;
        height: 300px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 10px #888888;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .logo {
        position: absolute;
        width: 100px; 
        border: 1px solid #eee;
        margin: 0 auto;
        margin-top: -418px;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 0 5px #ddd;
    }
    img {
        width: 100%;
        height: 100%;
    }
    .login-form {
        padding: 30px;
        width: 300px;
    }.btns{
        display: flex;
        justify-content: space-between;
    }.btns button {
        flex:1;
    }
    
</style>